<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<a href="javascript:history.back();" class="back-button">
				<i class="fa fa-arrow-left"></i> 返回
			</a>
			<p>我的订单</p>
		</header>

		<!-- 订单列表部分 -->
		<h3>未支付订单信息：</h3>
		<ul class="order">
			<template v-for="item in orderArr">
				<li v-if="item.orderState == 0">
					<div class="order-info">
						<p>
							{{ item.business.businessName }}
							<i class="fa fa-caret-down" @click="detailetShow(item)"></i>
						</p>
						<div class="order-info-right">
							<p>&#165;{{ (item.orderTotal).toFixed(2) }}</p>
							<div @click="toOrder(item.orderId)" class="order-info-right-icon">去支付</div>
						</div>
					</div>
					<ul class="order-detailet" v-show="item.isShowDetailet">
						<li v-for="odItem in item.list">
							<p>{{ odItem.food.foodName }} x {{ odItem.quantity }}</p>
							<p>&#165;{{ this.calculateTotalPrice(odItem.food.foodPrice, odItem.quantity) }}</p>
						</li>
						<li>
							<p>配送费</p>
							<p>&#165;{{ item.business.deliveryPrice.toFixed(2) }}</p>
						</li>
					</ul>
				</li>
			</template>
		</ul>

		<h3>已支付订单信息：</h3>
		<ul class="order">
			<template v-for="item in orderArr">
				<li v-if="item.orderState == 1">
					<div class="order-info">
						<p>
							{{ item.business.businessName }}
							<i class="fa fa-caret-down" @click="detailetShow(item)"></i>
						</p>
						<div class="order-info-right">
							<p>&#165;{{ (item.orderTotal).toFixed(2) }}</p>
						</div>
					</div>
					<ul class="order-detailet" v-show="item.isShowDetailet">
						<li v-for="odItem in item.list">
							<p>{{ odItem.food.foodName }} x {{ odItem.quantity }}</p>
							<p>&#165;{{ this.calculateTotalPrice(odItem.oldPrice, odItem.quantity) }}</p>
						</li>
						<li>
							<p>配送费</p>
							<p>&#165;{{ item.business.deliveryPrice.toFixed(2) }}</p>
						</li>
					</ul>
				</li>
			</template>
		</ul>
		<div style="height: 0.1vw;"></div>
		<!-- 底部菜单部分 -->
		<Footer></Footer>

	</div>
</template>

<script>
import Footer from '../components/Footer.vue';
import BigNumber from 'bignumber.js';

export default {
	name: 'OrderList',
	data() {
		return {
			orderArr: [],
			user: {},
			business: {},
			deliveryaddress: {}
		}
	},
	created() {
		this.user = this.$getSessionStorage('user');

		this.$axios.get(`Orders/userId/${this.user.userId}`)
			.then(response => {
				let result = response.data;
				for (let orders of result) {
					orders.isShowDetailet = false;
				}
				this.orderArr = result;
			}).catch(error => {
				console.error(error);
			});
	},
	methods: {
		calculateTotalPrice(price, quantity) {
			return new BigNumber(price).multipliedBy(quantity).toFixed(2);
		},
		detailetShow(orders) {
			orders.isShowDetailet = !orders.isShowDetailet;
		},
		toOrder(orderId) {
			this.$router.push({
				path: '/payment',
				query: {
					orderId: orderId
				}
			});
		},
	},
	computed: {
		totalPrice() {
			let totalPrice = new BigNumber(0); // 初始化总价格为 BigNumber 实例
			for (let cartItem of this.cartArr) {
				const foodPrice = new BigNumber(cartItem.food.foodPrice); // 将 foodPrice 转换为 BigNumber
				const quantity = new BigNumber(cartItem.quantity); // 将 quantity 转换为 BigNumber
				totalPrice = totalPrice.plus(foodPrice.times(quantity)); // 计算总价格
			}
			const deliveryPrice = new BigNumber(this.business.deliveryPrice); // 将 deliveryPrice 转换为 BigNumber
			totalPrice = totalPrice.plus(deliveryPrice); // 加上配送费

			return totalPrice.toFixed(2); // 格式化为 2 位小数
		}
	},
	components: {
		Footer
	}
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;

	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;

	display: flex;
	justify-content: center;
	align-items: center;
}

.back-button {
	position: absolute;
	top: 3.5vw;
	/* 使用相对单位 */
	left: 2.5vw;
	/* 使用相对单位 */
	font-size: 4vw;
	/* 使用相对单位 */
	text-decoration: none;
	color: white;
	display: flex;
	align-items: center;
}

.back-button i {
	margin-right: 1vw;
	/* 使用相对单位 */
}

/* 针对大屏幕 (如 iPad) 的媒体查询 */
@media (min-width: 768px) {
	.wrapper header {
		height: 8vh;
		/* 使用相对高度单位 */
		font-size: 3vh;
	}

	.back-button {
		position: absolute;
		top: 3.5vw;
		/* 使用相对单位 */
		left: 2.5vw;
		/* 使用相对单位 */
		font-size: 4vw;
		/* 使用相对单位 */
		text-decoration: none;
		color: white;
		display: flex;
		align-items: center;
	}

	.back-button i {
		margin-right: 1vw;
		/* 使用相对单位 */
	}

	/* 针对大屏幕 (如 iPad) 的媒体查询 */
	@media (min-width: 768px) {
		.wrapper header {
			height: 8vh;
			/* 使用相对高度单位 */
			font-size: 3vh;
		}

		.back-button {
			top: 2.5vh;
			/* 使用相对高度单位 */
			left: 2vh;
			font-size: 2.5vh;
			/* 相对大小单位 */
		}

		.back-button i {
			margin-right: 0.5vh;
		}
	}

	/****************** 历史订单列表部分 ******************/
	.wrapper h3 {
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw;
		font-size: 4vw;
		font-weight: 300;
		color: #999;
	}

	.back-button i {
		margin-right: 0.5vh;
	}
}

/****************** 历史订单列表部分 ******************/
.wrapper h3 {
	margin-top: 12vw;
	box-sizing: border-box;
	padding: 4vw;
	font-size: 4vw;
	font-weight: 300;
	color: #999;
}

.wrapper .order {
	width: 100%;
}

.wrapper .order li {
	width: 100%;
}

.wrapper .order li .order-info {
	box-sizing: border-box;
	padding: 2vw 4vw;
	font-size: 4vw;
	color: #666;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wrapper .order li .order-info .order-info-right {
	display: flex;
}

.wrapper .order li .order-info .order-info-right .order-info-right-icon {
	background-color: #f90;
	color: #fff;
	border-radius: 3px;
	margin-left: 2vw;
	user-select: none;
	cursor: pointer;
}

.wrapper .order li .order-detailet {
	width: 100%;
}

.wrapper .order li .order-detailet li {
	width: 100%;
	box-sizing: border-box;
	padding: 1vw 4vw;
	color: #666;
	font-size: 3vw;

	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>